<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #eeeeee;
        }
        .header{
            width: 100%;
            height: 1rem;
            background: #ffffff;
            text-align: center;
            position: relative;
            border-bottom: 1px solid #eeeeee;
        }
        .header .title{
            height: 1rem;
            line-height: 1rem;
            color: #2f2f2f;
        }
        .header .back{
            width: 0.2rem;
            height: 0.38rem;
            position: absolute;
            top: 0.31rem;
            left: 0.25rem;
        }
        .top{
            width: 100%;
            height: 2rem;
            padding: 0;
            position: relative;
        }
        .top .img1{
            width: 100%;
            height: 2rem;
        }
        .top .img2{
            width: 0.6rem;
            height: 0.74rem;
            position: absolute;
            top:0.52rem;
            left: 2.38rem;
        }
        .top .status{
            color: #ffffff;
            position: absolute;
            top: 0.74rem;
            left: 3.3rem;
        }
        .orderDetail{
            margin-top: 0.15rem;
            width: 100%;
            min-height: 1.8rem;
            background: #ffffff;
        }
        .content{
            width: 6.9rem;
            padding-top: 0.3rem;
            /*padding-bottom: 0.3rem;*/
            margin: 0 auto;
        }
        .content .info .top{
            display: flex;
            height: 0.5rem;
            line-height: 0.5rem;
        }
        .content .info .bottom{
            display: flex;
            margin-top: 0.25rem;
            padding-bottom: 0.35rem;
            align-items: center;
            border-bottom: 1px solid #eeeeee;
        }
        .number,.time{
            height: 0.7rem;
            line-height: 0.7rem;
            color: #666666;
        }
        .tip{
            width: 100%;
            background: #ffffff;
            margin-top: 0.15rem;
            padding-top: 0.3rem;
        }
        .tip .title{
            margin-left: 0.3rem;
            font-size: 0.32rem;
            color: #333333;
        }
        .mainContent{
            text-indent: 0.6rem;
            padding: 0.3rem;
            color: #333333;
            font-size: 0.28rem;
            line-height: 0.46rem;
        }
        .footer{
            text-align: center;
            margin-top: 0.3rem;
        }
    </style>
    <script>
        (function(designWidth, maxWidth) {
            var doc = document,
                win = window,
                docEl = doc.documentElement,
                remStyle = document.createElement("style"),
                tid;
            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                maxWidth = maxWidth || 540;
                width>maxWidth && (width=maxWidth);
                var rem = width * 100 / designWidth;
                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
            }
            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(remStyle);
            } else {
                var wrap = doc.createElement("div");
                wrap.appendChild(remStyle);
                doc.write(wrap.innerHTML);
                wrap = null;
            }
            refreshRem();
            win.addEventListener("resize", function() {
                clearTimeout(tid)
                tid = setTimeout(refreshRem, 300);
            }, false);
            win.addEventListener("pageshow", function(e) {
                if (e.persisted) {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            }, false);
            if (doc.readyState === "complete") {
                doc.body.style.fontSize = "16px";
            } else {
                doc.addEventListener("DOMContentLoaded", function(e) {
                    doc.body.style.fontSize = "16px";
                }, false);
            }
        })(750, 750);
    </script>
</head>
<body>
<header class="header">
    <img class="back" src="images/back.png" alt="">
    <p class="title">订单详情</p>
</header>
<div class="top">
    <img class="img1" src="images/orderdetaile.png"/>
    <img class="img2" src="images/cancel.png"/>
    <span class="status">订单已取消</span>
</div>
<div class="orderDetail">
    <div class="content">
        <div class="info">
            <div class="top">
                <span>订单信息</span>
                <div style="flex: 1"></div>
                <div style="width:1.33rem;height: 0.44rem;border-radius: 0.22rem;border: 1px solid #ebebeb;font-size:0.24rem;color:#666666;text-align:center;line-height:0.44rem;">删除订单</div>
            </div>
            <div class="bottom">
                <img src="images/2.png" style="width:1.34rem;height:1rem;margin-right: 0.15rem" alt="">
                <div style="flex: 1">
                    <p>房比邻周边 黑色男款T恤 黑色</p>
                    <p><span style="color:orange;font-size:0.4rem;">9</span><span>币</span></p>
                </div>
                <img src="images/join.png" style="width:0.13rem;height:0.25rem;" alt="">
            </div>
        </div>
        <div class="number">
            <span>订单编号：</span>
            <span>400121455452</span>
        </div>
        <div class="time">
            <span>兑换时间：</span>
            <span>2018-6-2  12:30</span>
        </div>

    </div>
</div>

<div class="tip">
    <p class="title">注意事项</p>
    <div class="mainContent">
        <p>房比邻周边T恤，T恤衫是春夏季人们最喜欢的服装之一，特别是烈日炎炎，酷暑难耐的盛夏，T恤衫以其自然、舒适、潇洒又不失庄重之感的优点而逐步代替昔日男士们穿件背心或汗衫外加一件短袖衬衫或香港衫的模式出现在社交场合，成为人们乐于穿着的时令服装。目前已成为全球男女老幼均爱穿着的时髦装。据说全世界年销量已高达数十亿件，与牛仔裤构成了全球最流行、穿着人数最多的服装。</p>
    </div>
</div>

<footer class="footer">
    <span style="color: #999999;font-size: 0.3rem">客服电话：</span>
    <span style="color: #286EA9">400-8950-555</span>
</footer>
</body>
</html>